<template>
	<view class="data-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">数据管理</text>
			</view>
		</view>
		
		<!-- 数据统计 -->
		<view class="stats-section">
			<view class="stats-card">
				<view class="stats-header">
					<text class="stats-title">数据概览</text>
					<text class="stats-subtitle">最后更新：{{ lastUpdateTime }}</text>
				</view>
				<view class="stats-grid">
					<view class="stat-item">
						<view class="stat-icon memo">
							<text class="icon-text">📝</text>
						</view>
						<view class="stat-info">
							<text class="stat-number">{{ dataStats.totalMemos }}</text>
							<text class="stat-label">备忘录总数</text>
						</view>
					</view>
					
					<view class="stat-item">
						<view class="stat-icon important">
							<text class="icon-text">⭐</text>
						</view>
						<view class="stat-info">
							<text class="stat-number">{{ dataStats.importantMemos }}</text>
							<text class="stat-label">重要备忘</text>
						</view>
					</view>
					
					<view class="stat-item">
						<view class="stat-icon category">
							<text class="icon-text">📂</text>
						</view>
						<view class="stat-info">
							<text class="stat-number">{{ dataStats.categories }}</text>
							<text class="stat-label">分类数量</text>
						</view>
					</view>
					
					<view class="stat-item">
						<view class="stat-icon storage">
							<text class="icon-text">💾</text>
						</view>
						<view class="stat-info">
							<text class="stat-number">{{ dataStats.storageSize }}</text>
							<text class="stat-label">存储大小</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 数据管理功能 -->
		<view class="management-section">
			<view class="section-card">
				<view class="section-title">数据备份</view>
				
				<view class="management-item" @click="exportData">
					<view class="item-left">
						<view class="item-icon export">
							<text class="icon-text">📤</text>
						</view>
						<view class="item-info">
							<text class="item-title">导出数据</text>
							<text class="item-desc">将备忘录导出为文件</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="management-item" @click="importData">
					<view class="item-left">
						<view class="item-icon import">
							<text class="icon-text">📥</text>
						</view>
						<view class="item-info">
							<text class="item-title">导入数据</text>
							<text class="item-desc">从文件导入备忘录</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="management-item" @click="syncData">
					<view class="item-left">
						<view class="item-icon sync">
							<text class="icon-text">☁️</text>
						</view>
						<view class="item-info">
							<text class="item-title">云端同步</text>
							<text class="item-desc">同步到云端服务器</text>
						</view>
					</view>
					<view class="sync-status" :class="syncStatus.type">
						<text class="status-text">{{ syncStatus.text }}</text>
					</view>
				</view>
			</view>
			
			<view class="section-card">
				<view class="section-title">数据清理</view>
				
				<view class="management-item" @click="cleanTrash">
					<view class="item-left">
						<view class="item-icon trash">
							<text class="icon-text">🗑️</text>
						</view>
						<view class="item-info">
							<text class="item-title">清空回收站</text>
							<text class="item-desc">永久删除已删除的备忘录</text>
						</view>
					</view>
					<text class="item-count">{{ dataStats.trashCount }}条</text>
				</view>
				
				<view class="management-item" @click="cleanCache">
					<view class="item-left">
						<view class="item-icon cache">
							<text class="icon-text">🧹</text>
						</view>
						<view class="item-info">
							<text class="item-title">清理缓存</text>
							<text class="item-desc">清理临时文件和缓存</text>
						</view>
					</view>
					<text class="item-count">{{ dataStats.cacheSize }}</text>
				</view>
				
				<view class="management-item" @click="resetData">
					<view class="item-left">
						<view class="item-icon reset">
							<text class="icon-text">🔄</text>
						</view>
						<view class="item-info">
							<text class="item-title">重置数据</text>
							<text class="item-desc">清除所有数据并恢复默认</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
			
			<view class="section-card">
				<view class="section-title">数据分析</view>
				
				<view class="management-item" @click="showAnalytics">
					<view class="item-left">
						<view class="item-icon analytics">
							<text class="icon-text">📊</text>
						</view>
						<view class="item-info">
							<text class="item-title">使用分析</text>
							<text class="item-desc">查看使用习惯和统计</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="management-item" @click="showTrends">
					<view class="item-left">
						<view class="item-icon trends">
							<text class="icon-text">📈</text>
						</view>
						<view class="item-info">
							<text class="item-title">趋势分析</text>
							<text class="item-desc">备忘录创建趋势</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
		</view>
		
		<!-- 导出格式选择弹窗 -->
		<view class="export-modal" v-if="showExportModal" @click="hideExportModal">
			<view class="export-content" @click.stop>
				<view class="export-header">
					<text class="export-title">选择导出格式</text>
					<view class="close-btn" @click="hideExportModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="format-list">
					<view 
						class="format-item" 
						v-for="(format, index) in exportFormats" 
						:key="index"
						@click="selectExportFormat(format)"
					>
						<view class="format-icon">
							<text class="format-emoji">{{ format.icon }}</text>
						</view>
						<view class="format-info">
							<text class="format-name">{{ format.name }}</text>
							<text class="format-desc">{{ format.desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			dataStats: {
				totalMemos: 0,
				importantMemos: 0,
				categories: 0,
				storageSize: '0KB',
				trashCount: 0,
				cacheSize: '0KB'
			},
			syncStatus: {
				type: 'offline',
				text: '未同步'
			},
			lastUpdateTime: '',
			showExportModal: false,
			exportFormats: [
				{
					name: 'JSON格式',
					desc: '完整数据备份，包含所有信息',
					icon: '📄',
					type: 'json'
				},
				{
					name: 'TXT文本',
					desc: '纯文本格式，易于阅读',
					icon: '📝',
					type: 'txt'
				},
				{
					name: 'Markdown',
					desc: 'Markdown格式，支持富文本',
					icon: '📑',
					type: 'md'
				},
				{
					name: 'CSV表格',
					desc: '表格格式，便于数据分析',
					icon: '📊',
					type: 'csv'
				}
			]
		}
	},
	
	onLoad() {
		this.loadDataStats();
		this.updateLastTime();
	},
	
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		loadDataStats() {
			// 获取统计数据
			const statsResult = localStorage.getStats();
			if (statsResult.success) {
				this.dataStats.totalMemos = statsResult.data.totalMemos || 0;
				this.dataStats.importantMemos = statsResult.data.importantMemos || 0;
				this.dataStats.categories = statsResult.data.categories || 0;
			}
			
			// 模拟其他数据
			this.dataStats.storageSize = this.formatSize(this.dataStats.totalMemos * 1024);
			this.dataStats.trashCount = Math.floor(this.dataStats.totalMemos * 0.1);
			this.dataStats.cacheSize = this.formatSize(512 * 1024);
		},
		
		formatSize(bytes) {
			if (bytes === 0) return '0KB';
			const k = 1024;
			const sizes = ['B', 'KB', 'MB', 'GB'];
			const i = Math.floor(Math.log(bytes) / Math.log(k));
			return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + sizes[i];
		},
		
		updateLastTime() {
			const now = new Date();
			this.lastUpdateTime = now.toLocaleString();
		},
		
		exportData() {
			this.showExportModal = true;
		},
		
		hideExportModal() {
			this.showExportModal = false;
		},
		
		selectExportFormat(format) {
			this.hideExportModal();
			
			uni.showLoading({
				title: '导出中...'
			});
			
			// 获取备忘录数据
			const memos = localStorage.getAllMemos();
			let exportData = '';
			let fileName = `备忘录_${new Date().toISOString().split('T')[0]}`;
			
			// 根据格式生成不同的导出内容
			switch(format.type) {
				case 'json':
					exportData = JSON.stringify(memos, null, 2);
					fileName += '.json';
					break;
				case 'txt':
					exportData = this.generateTxtFormat(memos);
					fileName += '.txt';
					break;
				case 'md':
					exportData = this.generateMarkdownFormat(memos);
					fileName += '.md';
					break;
				case 'csv':
					exportData = this.generateCsvFormat(memos);
					fileName += '.csv';
					break;
			}
			
			// 执行导出
			this.performExport(exportData, fileName, format);
		},
		
		generateTxtFormat(memos) {
			let content = '小何备忘录导出\n';
			content += '==================\n\n';
			
			if (memos.success && memos.data.length > 0) {
				memos.data.forEach((memo, index) => {
					content += `${index + 1}. ${memo.title}\n`;
					content += `创建时间：${memo.createTime}\n`;
					content += `内容：${memo.content || '无'}\n`;
					content += `重要程度：${memo.isImportant ? '重要' : '普通'}\n`;
					content += '-------------------\n\n';
				});
			} else {
				content += '暂无备忘录数据\n';
			}
			
			return content;
		},
		
		generateMarkdownFormat(memos) {
			let content = '# 小何备忘录导出\n\n';
			
			if (memos.success && memos.data.length > 0) {
				memos.data.forEach((memo, index) => {
					content += `## ${index + 1}. ${memo.title}\n\n`;
					content += `- **创建时间：** ${memo.createTime}\n`;
					content += `- **重要程度：** ${memo.isImportant ? '⭐ 重要' : '普通'}\n`;
					content += `- **内容：**\n\n${memo.content || '无内容'}\n\n`;
					content += '---\n\n';
				});
			} else {
				content += '暂无备忘录数据\n';
			}
			
			return content;
		},
		
		generateCsvFormat(memos) {
			let content = '标题,内容,创建时间,是否重要\n';
			
			if (memos.success && memos.data.length > 0) {
				memos.data.forEach(memo => {
					const title = (memo.title || '').replace(/,/g, '，');
					const contentText = (memo.content || '').replace(/,/g, '，').replace(/\n/g, ' ');
					const createTime = memo.createTime || '';
					const isImportant = memo.isImportant ? '是' : '否';
					
					content += `"${title}","${contentText}","${createTime}","${isImportant}"\n`;
				});
			}
			
			return content;
		},
		
		performExport(data, fileName, format) {
			setTimeout(() => {
				uni.hideLoading();
				
				// #ifdef H5
				// 浏览器环境直接下载
				this.downloadFile(data, fileName);
				uni.showToast({
					title: `${format.name}导出成功`,
					icon: 'success'
				});
				// #endif
				
				// #ifdef MP
				// 小程序环境保存到相册或分享
				uni.showModal({
					title: '导出完成',
					content: `${format.name}已准备就绪，是否复制到剪贴板？`,
					success: (res) => {
						if (res.confirm) {
							uni.setClipboardData({
								data: data,
								success: () => {
									uni.showToast({
										title: '已复制到剪贴板',
										icon: 'success'
									});
								}
							});
						}
					}
				});
				// #endif
				
				// #ifdef APP-PLUS
				// App环境保存到文件系统
				this.saveToFile(data, fileName);
				uni.showToast({
					title: `${format.name}导出成功`,
					icon: 'success'
				});
				// #endif
			}, 1500);
		},
		
		downloadFile(data, fileName) {
			const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
			const url = URL.createObjectURL(blob);
			const link = document.createElement('a');
			link.href = url;
			link.download = fileName;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			URL.revokeObjectURL(url);
		},
		
		saveToFile(data, fileName) {
			// App环境下的文件保存逻辑
			// 这里可以使用plus.io等API保存到文件系统
			console.log('保存文件:', fileName, data);
		},
		
		importData() {
			// #ifdef H5
			// 浏览器环境使用文件选择
			const input = document.createElement('input');
			input.type = 'file';
			input.accept = '.json,.txt,.md,.csv';
			input.onchange = (e) => {
				const file = e.target.files[0];
				if (file) {
					this.processImportFile(file);
				}
			};
			input.click();
			// #endif
			
			// #ifdef MP || APP-PLUS
			// 小程序和App环境的简化导入
			uni.showModal({
				title: '导入数据',
				content: '请将数据粘贴到剪贴板，然后点击确定导入',
				success: (res) => {
					if (res.confirm) {
						uni.getClipboardData({
							success: (res) => {
								this.processImportText(res.data);
							},
							fail: () => {
								uni.showToast({
									title: '获取剪贴板数据失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
			// #endif
		},
		
		processImportFile(file) {
			const reader = new FileReader();
			reader.onload = (e) => {
				const content = e.target.result;
				this.processImportText(content);
			};
			reader.readAsText(file);
		},
		
		processImportText(content) {
			try {
				let importedMemos = [];
				
				// 尝试解析JSON格式
				if (content.trim().startsWith('{') || content.trim().startsWith('[')) {
					const jsonData = JSON.parse(content);
					if (jsonData.data && Array.isArray(jsonData.data)) {
						importedMemos = jsonData.data;
					} else if (Array.isArray(jsonData)) {
						importedMemos = jsonData;
					}
				} else {
					// 解析文本格式（简单解析）
					const lines = content.split('\n');
					let currentMemo = null;
					
					lines.forEach(line => {
						line = line.trim();
						if (line.match(/^\d+\./)) {
							// 新的备忘录开始
							if (currentMemo) {
								importedMemos.push(currentMemo);
							}
							currentMemo = {
								id: Date.now() + Math.random(),
								title: line.replace(/^\d+\./, '').trim(),
								content: '',
								createTime: new Date().toLocaleString(),
								isImportant: false
							};
						} else if (currentMemo && line.startsWith('内容：')) {
							currentMemo.content = line.replace('内容：', '').trim();
						} else if (currentMemo && line.includes('重要')) {
							currentMemo.isImportant = true;
						}
					});
					
					if (currentMemo) {
						importedMemos.push(currentMemo);
					}
				}
				
				// 执行导入
				if (importedMemos.length > 0) {
					this.executeImport(importedMemos);
				} else {
					uni.showToast({
						title: '未找到有效的备忘录数据',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.showToast({
					title: '数据格式错误',
					icon: 'none'
				});
			}
		},
		
		executeImport(memos) {
			uni.showLoading({
				title: '导入中...'
			});
			
			setTimeout(() => {
				// 模拟导入过程
				let successCount = 0;
				memos.forEach(memo => {
					const result = localStorage.addMemo(memo);
					if (result.success) {
						successCount++;
					}
				});
				
				uni.hideLoading();
				uni.showToast({
					title: `成功导入${successCount}条备忘录`,
					icon: 'success'
				});
				
				// 刷新统计数据
				this.loadDataStats();
			}, 1500);
		},
		
		syncData() {
			uni.showLoading({
				title: '同步中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				this.syncStatus = {
					type: 'synced',
					text: '已同步'
				};
				uni.showToast({
					title: '同步成功',
					icon: 'success'
				});
			}, 2000);
		},
		
		cleanTrash() {
			uni.showModal({
				title: '确认清空',
				content: `确定要永久删除回收站中的${this.dataStats.trashCount}条备忘录吗？`,
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						this.dataStats.trashCount = 0;
						uni.showToast({
							title: '回收站已清空',
							icon: 'success'
						});
					}
				}
			});
		},
		
		cleanCache() {
			uni.showLoading({
				title: '清理中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				this.dataStats.cacheSize = '0KB';
				uni.showToast({
					title: '缓存清理完成',
					icon: 'success'
				});
			}, 1500);
		},
		
		resetData() {
			uni.showModal({
				title: '危险操作',
				content: '此操作将清除所有数据并无法恢复，确定继续吗？',
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						uni.showModal({
							title: '最后确认',
							content: '真的要重置所有数据吗？此操作不可撤销！',
							confirmColor: '#ff4757',
							success: (res2) => {
								if (res2.confirm) {
									uni.showToast({
										title: '重置功能开发中',
										icon: 'none'
									});
								}
							}
						});
					}
				}
			});
		},
		
		showAnalytics() {
			// 生成使用分析数据
			const analyticsData = this.generateAnalyticsData();
			
			let message = `📊 使用分析报告\n\n`;
			message += `📝 平均每日创建：${analyticsData.dailyAverage}条\n`;
			message += `⭐ 重要备忘占比：${analyticsData.importantRatio}%\n`;
			message += `📂 最常用分类：${analyticsData.topCategory}\n`;
			message += `⏰ 最活跃时段：${analyticsData.activeTime}\n`;
			message += `📈 使用趋势：${analyticsData.trend}\n`;
			message += `🎯 完成率：${analyticsData.completionRate}%`;
			
			uni.showModal({
				title: '使用分析',
				content: message,
				showCancel: false,
				confirmText: '知道了'
			});
		},
		
		showTrends() {
			// 生成趋势分析数据
			const trendData = this.generateTrendData();
			
			let message = `📈 趋势分析报告\n\n`;
			message += `📊 本周创建：${trendData.thisWeek}条\n`;
			message += `📊 上周创建：${trendData.lastWeek}条\n`;
			message += `📈 周环比：${trendData.weekGrowth}%\n`;
			message += `📊 本月创建：${trendData.thisMonth}条\n`;
			message += `📈 月增长：${trendData.monthGrowth}%\n`;
			message += `🔥 最高日产：${trendData.maxDaily}条\n`;
			message += `📅 最活跃日：${trendData.mostActiveDay}`;
			
			uni.showModal({
				title: '趋势分析',
				content: message,
				showCancel: false,
				confirmText: '知道了'
			});
		},
		
		generateAnalyticsData() {
			const total = this.dataStats.totalMemos;
			const important = this.dataStats.importantMemos;
			
			return {
				dailyAverage: Math.ceil(total / 30) || 1,
				importantRatio: total > 0 ? Math.round((important / total) * 100) : 0,
				topCategory: ['工作', '生活', '学习', '娱乐'][Math.floor(Math.random() * 4)],
				activeTime: ['上午9-11点', '下午2-4点', '晚上8-10点'][Math.floor(Math.random() * 3)],
				trend: total > 20 ? '上升趋势' : total > 10 ? '稳定增长' : '起步阶段',
				completionRate: Math.floor(Math.random() * 30) + 70 // 70-99%
			};
		},
		
		generateTrendData() {
			const total = this.dataStats.totalMemos;
			const thisWeek = Math.ceil(total * 0.3);
			const lastWeek = Math.ceil(total * 0.25);
			const thisMonth = Math.ceil(total * 0.8);
			
			return {
				thisWeek: thisWeek,
				lastWeek: lastWeek,
				weekGrowth: lastWeek > 0 ? Math.round(((thisWeek - lastWeek) / lastWeek) * 100) : 100,
				thisMonth: thisMonth,
				monthGrowth: Math.floor(Math.random() * 50) + 10, // 10-59%
				maxDaily: Math.ceil(total / 15) || 1,
				mostActiveDay: ['周一', '周二', '周三', '周四', '周五'][Math.floor(Math.random() * 5)]
			};
		}
	}
}
</script>

<style lang="scss" scoped>
.data-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-section {
	position: relative;
	z-index: 1;
	padding: 60rpx 30rpx 30rpx;
}

.stats-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
}

.stats-header {
	margin-bottom: 30rpx;
}

.stats-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.stats-subtitle {
	font-size: 24rpx;
	color: #999;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.stat-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
}

.stat-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	
	&.memo {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.important {
		background: linear-gradient(135deg, #ff9500 0%, #ffad33 100%);
	}
	
	&.category {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}
	
	&.storage {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}
}

.icon-text {
	font-size: 28rpx;
}

.stat-info {
	flex: 1;
}

.stat-number {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 4rpx;
}

.stat-label {
	font-size: 22rpx;
	color: #666;
}

.management-section {
	position: relative;
	z-index: 1;
	padding: 0 30rpx 40rpx;
}

.section-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

.management-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.management-item:last-child {
	border-bottom: none;
}

.management-item:active {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 16rpx;
	margin: 0 -20rpx;
	padding: 30rpx 20rpx;
}

.item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.item-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	
	&.export {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.import {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}
	
	&.sync {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}
	
	&.trash {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	}
	
	&.cache {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}
	
	&.reset {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	}
	
	&.analytics {
		background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
	}
	
	&.trends {
		background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
	}
}

.item-info {
	flex: 1;
}

.item-title {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.item-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
}

.item-arrow {
	font-size: 36rpx;
	color: #ccc;
	margin-left: 20rpx;
}

.item-count {
	font-size: 26rpx;
	color: #667eea;
	font-weight: 600;
	margin-left: 20rpx;
}

.sync-status {
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	margin-left: 20rpx;
	
	&.offline {
		background: rgba(255, 149, 0, 0.1);
		.status-text { color: #ff9500; }
	}
	
	&.synced {
		background: rgba(76, 217, 100, 0.1);
		.status-text { color: #4cd964; }
	}
}

.status-text {
	font-size: 24rpx;
	font-weight: 600;
}

.export-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.export-content {
	width: 100%;
	max-height: 70%;
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
}

.export-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.export-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30rpx;
	background: #f8f9fa;
}

.close-icon {
	font-size: 36rpx;
	color: #666;
}

.format-list {
	padding: 20rpx 40rpx 40rpx;
}

.format-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.format-item:last-child {
	border-bottom: none;
}

.format-item:active {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 16rpx;
	margin: 0 -20rpx;
	padding: 30rpx 20rpx;
}

.format-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.format-emoji {
	font-size: 36rpx;
}

.format-info {
	flex: 1;
}

.format-name {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.format-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
}
</style> 